.cabecalho {
    display: flex;
}

.nome-estado {
    font-size: 2.5em;
    margin: 0 0 1vh 0;
}

html::-webkit-scrollbar {
    display: none;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-hyphens: auto;
    /* Safari/Chrome */
    -ms-hyphens: auto;
    /* IE/Edge */
    hyphens: auto;
    /* Padrão (Firefox/Chrome moderno) */
    /* Garante quebra de palavras longas mesmo sem hifenização */
    word-wrap: break-word;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cabecalho {
  display: grid;
  grid-template-columns: 1fr 14fr 1fr;
}

.link-logo-omu {
  margin-left: 0;
}

.logo-omu {
  width: 6vw;
  height: auto;
  margin: 2.5vh 2vw 0 4vw;
}

.link-login {
    color: #F95E3E;
    font-weight: 700;
}

.menu-navegacao {
  display: flex;
  justify-content: space-evenly;
  width: 82vw;
  font-size: 1.5em;
  margin: 4vh 0vw 0 0;
}

#trocar-dispositivo{
  grid-column: 3;
  justify-self: end;
  align-self: start;
  margin-top: 1vh;
  width: auto;  
    margin-left: auto;  
}


#trocar-dispositivo img{
  width: 55%;
  display: block;
  cursor: pointer;
  margin-left: auto;
}

.link-logo-omu {
    margin-left: 0vw;
}

.span-vermelho {
    color: #F95E3E;
    font-weight: 900;
}

.span-azul {
    color: #3856F8;
    font-weight: 900;
}

.span-amarelo {
    color: #F8BA1B;
    font-weight: 900;
}

.span-branco {
    color: #ffffff;
    font-weight: 900;
}

.span-rosa {
    color: #F89EDA;
    font-weight: 900;

}


.l1,
.l2,
.l3,
.l4 {
    font-weight: 500;
    font-family: 'Jost';
}

.l1:hover {
    color: #F95E3E;
    text-decoration: none;
}

.l2:hover {
    color: #3856F8;
    text-decoration: none;
}

.l3:hover {
    color: #F89EDA;
    text-decoration: none;
}

.l4:hover {
    color: #F8BA1B;
    text-decoration: none;
}

.link-login:hover {
    color: #000000;
    text-decoration: none;
}

a {
    text-decoration: none;
    color: #000000;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    border: none;
    outline: none;
}

body {
    background-color: #FCF7CF;
    ;
}

h1 {
    font-family: 'Jost';
    font-size: 1.5em;
}

.texto-colorido {
    font-family: 'Nimbus Sans L';
    font-weight: 400;
    margin: 0% 0% 0% 0%;
}

.linhas-coloridas {
    margin: 0vh 0vw 0vh 2vw;
}

.box-texto-colorido {
    margin: 4vh 2vw 10vw 0vw;
    font-family: 'Nimbus Sans L';
    font-size: 1.25em;
    word-spacing: 1.5px;
    width: 40vw;
}

.box-pilares {
    width: 50vw;
    margin: 0vw 4vw 0vw 4vw;
    display: flex;
    flex-direction: column;
}

.missao {
    border: 2px solid #F8BA1B;
    border-radius: 5px;
    padding: 1vh 2vw 1vh 2vw;
    font-family: 'Nimbus Sans L';
    margin: 0vh 0vw 4vh 0vw;
    text-align: justify;
}

.visao {
    border: 2px solid #F95E3E;
    border-radius: 5px;
    padding: 1vh 2vw 1vh 2vw;
    font-family: 'Nimbus Sans L';
    text-align: justify;
}

.valores {
    border: 2px solid #3856F8;
    border-radius: 5px;
    padding: 1vh 1vw 1vh 2vw;
    font-family: 'Nimbus Sans L';
    text-align: justify;
}

.box-foto-triangulo-texto {
    display: flex;
    flex-direction: row;
    margin: 0vh 4vw 5vh 4vw;
    ;
}

.foto-triangulo {
    width: 40vw;
    margin: 0vh 2vw 0vh 0vw;
}

#sobre-nos {
    text-align: justify;
    font-size: 2em;
}

.texto-sobre {
    font-size: 0.85rem;
    white-space: nowrap;
}

.sobre-omu {
    font-family: 'Nimbus Sans L';
    font-size: 1.25em;
    text-align: justify;
}

#jost-grosso-historia {
    font-family: 'Jost';
    letter-spacing: 1px;
}

.numeros-omu {
    font-family: 'Nimbus Sans L';
}

.forma-e-frase {
    display: flex;
    flex-direction: row;
    align-items: first baseline;
    font-size: 1.4em;
    margin: 0vh 0vh 2vh 0vh;
}

.forma {
    height: 4vh;
    vertical-align: text-bottom;
}

.frase {
    margin: 0vh 0vh 0vh 2vh;
}

#omu-numeros {
    font-size: 3em;
    margin: 0vh 0vh 0vh 0vh;
}

#ano {
    font-size: 2.5em;
    margin: 0vh 0vh 0vh 0vh;
}

.box-mapa-dados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-family: 'Jost';
    width: 100%;
    margin:0vh 4vw 0vh 4vw;
}

#state-label {
    font-weight: 700;
    margin: 0vh 0vw 3vh 0vw;
}

#map-container {
    width: 50vw;
}
 
#map-container svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Estados */
.state {
    fill: #FCF7CF;
    stroke: #000;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition: fill 0.2s;
}

.mapa-numeros-omu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.5em;
}

.box-colorido {
    display: flex;
    flex-direction: column;
    margin: 0vh 0vw 5vh 0vw;
    width: 100%;
    align-items: center;
}


.container {
    width: 92%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 4vw 0 4vw;
    font-family: 'Jost';
}

.card {
    position: relative;
    width: 30%;
    height: 10vh;
    margin: 4vh 0vw 4vh 0vw;
    background: #FCF7CF;
    border-radius: 15px;
    border: 2px solid #3856F8;
    padding: 15px;
    border-radius: 10px;

}

.card .face {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .face.face1 {
    box-sizing: border-box;
    padding: 10px 0px 0px 0px;
    text-align: justify;
}

.card .face.face1 h2 {
    margin: 0;
    padding: 0;
}

.card .face.face1 .content {
    font-size: 1.2em;
    margin: 0;
    padding: 0 0 0 0;
    font-weight: 500;
}

.card .face.face2 {
    background: #FCF7CF;
    transition: 0.3s;
}

.card:nth-child(1) .face.face2 {
    background: #FCF7CF;
    border-radius: 15px;
    color: #3856F8;
}

.card:hover .face.face2 {
    height: 0;
    border-radius: 0 0 15px 15px;
    box-sizing: border-box;
    align-items: flex-end;
    padding-bottom: 8px;
    /* distância da borda azul */
}


.card .face.face2:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;

    border-radius: 15px 0 0 15px;
}

.card .face.face2 h2 {
    margin: 0;
    padding: 0;
    font-size: 5em;
    transition: 0.5s;

}

.card:hover .face.face2 h2 {
    position: absolute;
    left: 16px;
    /* ajuste aqui: 12px, 20px... */
    top: 0;
    margin: 0;

    font-size: 1.2em;
    line-height: 1;

    transform: translateY(-50%);
    /* metade pra fora, "recorta" a borda */
    background: #FCF7CF;
    /* mesma cor do card */
    padding: 0 .6em .1em;
    z-index: 10;
}

.card .face.face2,
.card .face.face2 h2 {
    transition: none !important;
}

.card:hover .face.face2 {
    top: 0;
    bottom: auto;
    /* cancela o bottom:0 da .face */
    height: 0;
    /* não cobre mais o conteúdo */
    background: transparent;
}

.tema-amarelo {
    border: 2px solid #F8BA1B;
}

.tema-vermelho {
    border: 2px solid #F95E3E;
}

.texto-amarelo {
    color: #F8BA1B;
}

.texto-vermelho {
    color: #F95E3E;
}

.card {
    border-radius: 15px;
    /* ou escolha 10px, mas aí tem que trocar os 15px do efeito também */
}

/* Faz as faces seguirem o mesmo arredondado */
.card .face {
    border-radius: inherit;
}

.card {
    height: auto !important;
    /* mata o height: 15vh */
    min-height: 15vh;
    /* mantém um “tamanho base” */
}

/* 2) face1 vira “normal” (define a altura do card) */
.card .face.face1 {
    position: relative !important;
    /* sobrescreve o absolute */
    height: auto !important;
    /* não prende em 100% */
    display: block !important;
}

/* 3) face2 continua por cima (tampa) */
.card .face.face2 {
    position: absolute;
    inset: 0;
    /* top/right/bottom/left: 0 */
}

/* 4) garante quebra de linha e evita palavras estourando */
.card .face.face1 .content p {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: 'Nimbus Sans L';
}

.span-amarelo-grosso {
    color: #F8BA1B;
    font-weight: 900;
}

.span-azul-grosso {
    color: #3856F8;
    font-weight: 900;
}

.span-rosa-grosso {
    color: #F89EDA;
    font-weight: 900;

}

.span-vermelho-grosso {
    color: #F95E3E;
    font-weight: 900;
}


/* =========================
   Footer
========================= */
footer {
    background-color: #3856F8;
    color: #fff;
    font-family: "Jost", sans-serif;
    font-weight: 300;
    width: 100%;
    margin: 5vh 0 0 0 ;
}

.faixa {
    width: 100vw;
    height: auto;
}

footer h1 {
    font-size: x-large;
    font-weight: 700;
}

footer h3 {
    font-family: "Jost", arial;
    font-optical-sizing: auto;
    font-weight: 700;
}

/* Container 2 colunas */
.div-pai-footer {
    display: flex;
    align-items: stretch;
    /* importante: iguala a altura das colunas */
    width: 100%;
}

/* Só as duas colunas diretas ganham largura/margem */
footer .div-pai-footer>div {
    width: 42vw;
    margin: 2.5vw 4vw;
}

/* Colunas: grid (topo cresce, base fica no fundo) */
.flexionar,
.logos {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 0;
}

.footer-top {
    min-height: 0;
}

.texto-omu-footer {
    font-family: "Nimbus Sans L", sans-serif;
    text-align: justify;
}

/* Redes sociais (base esquerda) */
.linha-redes-sociais {
    align-self: end;
    /* cola no bottom da coluna */
    display: flex;
    align-items: flex-end;
    gap: 1vw;
    margin: 0;
    /* sem margens “roubando” o bottom */
}

.icone-rede-social {
    height: 4vh;
    width: auto;
}

/* Apoio (base direita) */
.box-apoiadores {
    align-self: end;
    /* cola no bottom da coluna */
    margin: 0;
}

.enfileirar {
    display: flex;
    flex-direction: row;
    margin: 0;
}

.coluna {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 1vw 0 0;
    width: auto;
}

.box-apoiadores a {
    display: block;
    line-height: 0;
}

.logo-grande {
    height: 10vh;
    width: auto;
    margin: 0 1vw 0 0;
}

.logo-metade {
    height: 6vh;
    width: auto;
    display: block;
}

.logo-grande-fit {
    height: 12vh;
    width: auto;
    display: block;
}


.video-wrap{
  width: 70%;
  margin: 0 auto 5vh auto;
  aspect-ratio: 16 / 9;
  align-self: center;
}

.video-wrap iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.texto p{
    font-family: 'Nimbus Sans L';
    font-size: 1.25em;
}

.box-membros-omu{
    display: flex;
    flex-direction: column;
    margin: 0vh 4vw 5vh 4vw;
    
}

.box-membros-omu h1{
    text-align: center;
    font-size: 3em;
    margin: 0;
}

.membro-nome h1{
    font-size: 2em;
    margin: 0 0.75vw 0 0;
}

.card-membro{
    display:grid;
    grid-template-columns: 1.5fr 2.5fr 0.5fr 1.5fr 2.5fr;
    align-items: baseline;
    margin: 4vh 0;
    gap: 2vh;
}

.card-membro p{
    font-family: 'Nimbus Sans L';
    margin: 0;
    text-align: justify;
}

.membro-nome{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#naturalidade{
    color:#323232;
    font-size: 0.75em;
}

.texto-total-membro{
    align-self: center;
}

.foto-esquerda img{
    margin: 0 auto 0 auto;
    width: 100%;
}

#frase{
    font-size: 1em;
    color: #323232;
}

.texto-total-membro p{
    font-size: 1em;
}

.foto-direita{
    display: flex;
    flex-direction: row-reverse;
}

.foto-direita img{
    margin: 0 0 0 4vw;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 50;
  font-size: 2em;
  margin: 0 0 
}

button{
    border: none;
    background-color: #FCF7CF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
}

button:hover{
    cursor: pointer;
}

#myDIV {
    display: none;
    text-align: center;
    margin: 0 4vw;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    row-gap: 1vw;
    column-gap: 4vw;
}

.card-ex-membro{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}

.card-ex-membro img{
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1vh;
}

.card-ex-membro p{
    margin: 0;
    font-family: 'Nimbus Sans L';
}

.card-ex-membro h1{
    margin: 0.5vh;
}